<template>
   <div>
    <el-drawer
    title="选择上传的db文件"
     :visible.sync="drawer"
     :before-close="handleClose"
     size="20%">  
     <el-upload
     class="upload-demo"
     ref="upload"
     action="http://39.98.94.7:8090/api/dataQuery/upload/"
     accept=".db" 
     multiple
     :limit="5"
     :headers="header"
     :on-exceed="handleExceed"
     :on-remove="handleRemove"
     :file-list="fileList"
     :on-change="handData"
     :auto-upload="false"
   >
   <el-col :span="3">&emsp;</el-col>
   <el-button slot="trigger" type="primary" >选取文件</el-button>
   <el-button
     type="success"
     @click="submitUpload"
   >上传到服务器</el-button>
   <div slot="tip" class="el-upload__tip"></div>
    </el-upload>               
    </el-drawer>
    <el-form :inline="true" :model="form" label-width="80px">
      <el-row :gutter="10">
        <el-col :xl="3" :lg="6" :md="6" :sm="6">
          <el-form-item>
            <el-input v-model="form.wellName" maxlength="20" placeholder="井名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="3" :lg="6" :md="6" :sm="6">
          <el-form-item>
            <el-select v-model="form.workCompany" placeholder="作业公司" clearable filterable>
              <el-option v-for="item in workCompanyOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xl="3" :lg="6" :md="6" :sm="6">
          <el-form-item>
            <el-select v-model="form.country" placeholder="国别" clearable filterable>
              <el-option v-for="item in countryOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xl="3" :lg="6" :md="6" :sm="6">
          <el-form-item>
            <el-select v-model="form.area" placeholder="区域" clearable filterable>
              <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xl="3" :lg="6" :md="6" :sm="6">
          <el-form-item>
            <el-input v-model="form.block" maxlength="20" placeholder="区块" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="3" :lg="6" :md="6" :sm="6">
          <el-form-item>
            <el-input v-model="form.oilfield" maxlength="20" placeholder="构造/油田" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :xl="6" :lg="12" :md="12" :sm="12">
          <el-form-item>
            <el-button type="primary" @click="submitform">查询</el-button>
            <el-button type="primary" @click="createWellVisible = true">创建井眼</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表 -->
    <el-row>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="WELLNAME" label="井名" width="120"></el-table-column>
        <el-table-column prop="COUNTRY" label="国别"></el-table-column>
        <el-table-column prop="AREA" label="区域"></el-table-column>
        <el-table-column prop="BLOCK" label="区块"></el-table-column>
        <el-table-column prop="OILFIELD" label="油田" width="100"></el-table-column>
        <el-table-column prop="CEMENTCOMPANY" label="作业公司" width="120"></el-table-column>
        <el-table-column label="位置" align="center">
          <el-table-column prop="GeographicalPosition" label="地理位置" width="80"></el-table-column>
          <el-table-column prop="StructuralLocation" label="构造位置" width="80"></el-table-column>
        </el-table-column>
        <el-table-column label="井位坐标" align="center">
          <el-table-column prop="WellheadX" label="井位坐标(x)" width="80"></el-table-column>
          <el-table-column prop="WellheadX" label="井位坐标(y)" width="80"></el-table-column>
          <el-table-column prop="WellheadLongitude" label="井位坐标(经度)" width="80"></el-table-column>
          <el-table-column prop="WellheadLatitude" label="井位坐标(纬度)" width="80"></el-table-column>
        </el-table-column>
        <el-table-column prop="WaterDepth" label="水深"></el-table-column>
        <el-table-column prop="MudLine" label="泥线"></el-table-column>
        <el-table-column prop="BushingAlti" label="转盘高度"></el-table-column>
        <el-table-column prop="WELLTYPE" label="井型"></el-table-column>
        <el-table-column prop="WELLSPACING" label="井别"></el-table-column>
        <el-table-column prop="WellCategory" label="井类"></el-table-column>
        <el-table-column prop="IsLandWell" label="是否陆地井"></el-table-column>
        <el-table-column label="钻井平台" align="center">
          <el-table-column prop="DrillingPlatform" label="钻机号" width="70"></el-table-column>
          <el-table-column prop="DrillingPlatformType" label="类型" width="50"></el-table-column>
        </el-table-column>
        <el-table-column label="隔水管" align="center">
          <el-table-column prop="RiserOD" label="导管外径" width="80"></el-table-column>
          <el-table-column prop="RiserID" label="导管内径" width="80"></el-table-column>
        </el-table-column>
        <el-table-column prop="RiserDepth" label="隔水管深"></el-table-column>
        <el-table-column label="承包商" align="center">
          <el-table-column prop="BoreholeCompany" label="钻井承包商" width="80"></el-table-column>
          <el-table-column prop="MudCompany" label="钻井液承包商" width="80"></el-table-column>
          <el-table-column prop="CementCompany" label="固井承包商" width="80"></el-table-column>
        </el-table-column>
        <el-table-column prop="Operator" label="作业者"></el-table-column>
        <el-table-column prop="OperatorDeputy" label="作业者代表"></el-table-column>
        <el-table-column prop="DesignDepth" label="设计井深"></el-table-column>
        <el-table-column prop="DesignVertical" label="设计垂深"></el-table-column>
        <el-table-column prop="DrillingGoal" label="钻井目的"></el-table-column>
        <el-table-column prop="SideDrillingPoint" label="开窗侧钻点"></el-table-column>
        <el-table-column prop="DRILLINGSTARTTIME" label="开钻时间" width="100"></el-table-column>
        <el-table-column prop="DRILLINGFINISHTIME" label="完钻时间" width="100"></el-table-column>
        <el-table-column prop="DrillingPeriod" label="钻井周期"></el-table-column>
        <el-table-column prop="ConstructionPeriod" label="建井周期"></el-table-column>
        <el-table-column prop="DrillingDepth" label="开钻井深(m)" width="100"></el-table-column>
        <el-table-column prop="DrillingVerticalDepth" label="开钻垂深"></el-table-column>
        <el-table-column prop="ActualWellDepth" label="实际井深"></el-table-column>
        <el-table-column prop="ActualVertical" label="实际垂深"></el-table-column>
        <el-table-column prop="WkloleDrillingHorizon" label="完钻层位"></el-table-column>
        <el-table-column prop="Principle" label="完钻原则"></el-table-column>
        <el-table-column prop="CompletionMethod" label="完井方法"></el-table-column>
        <el-table-column prop="AverageSpeed" label="平均机械钻速"></el-table-column>
        <el-table-column prop="CoringFootage" label="取心进尺"></el-table-column>
        <el-table-column prop="CompletionMethod" label="岩心收获率"></el-table-column>
        <el-table-column prop="HOLETEMPERATURE" label="井底温度(℃)" width="120"></el-table-column>
        <el-table-column prop="HOLEPRESSURE" label="井底压力(psi)" width="120"></el-table-column>

        <el-table-column label="最大密度(g/cm3)" align="center">
          <el-table-column prop="HOLEMAXDENSITY" label="密度" width="50"></el-table-column>
          <el-table-column prop="HOLEMAXDENSITYCASINGSIZE" label="套管尺寸" width="80"></el-table-column>
          <el-table-column prop="HOLEMAXDENSITYSLURYSYSTEM" label="水泥浆体系" width="150"></el-table-column>
          <el-table-column prop="HOLEMAXDENSITYFLUIDDENSITITY" label="对应钻井液密度" width="120"></el-table-column>
        </el-table-column>

        <el-table-column label="最小密度(g/cm3)" align="center">
          <el-table-column prop="HOLEMINDENSITY" label="密度" width="50"></el-table-column>
          <el-table-column prop="HOLEMINDENSITYCASINGSIZE" label="套管尺寸" width="80"></el-table-column>
          <el-table-column prop="HOLEMINDENSITYSLURYSYSTEM" label="水泥浆体系" width="150"></el-table-column>
          <el-table-column prop="HOLEMINDENSITYFLUIDDENSITITY" label="对应钻井液密度" width="120"></el-table-column>
        </el-table-column>
        <el-table-column prop="MUDLINETEMP" label="泥线温度(℃)" width="120"></el-table-column>
        <el-table-column prop="HDVSVD" label="水垂比" width="70"></el-table-column>
        <el-table-column prop="MAINCHALLENGE" label="重难点情况" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="250">
          <template slot-scope="scope">
            <!-- <el-col :span="8">                      
             <el-button @click="drawer = true" type="primary" size="mini" icon="el-icon-top">
              上传
            </el-button></el-col> -->
            <el-col :span="8">     
            <router-link :to="{ name: 'wellEdit', params: { id: scope.row.WELLNAME } }">
              <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
            </router-link></el-col>
            <el-col :span="8">
              <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDeleteWell(scope.row)"
            >删除</el-button>
            </el-col>
            <!-- </router-link> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-base">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="1"
          :page-size="25"
          :total="total"
          background
          layout="total,prev, pager, next,jumper"
        ></el-pagination>
      </div>
    </el-row>
    <el-dialog :visible.sync="createWellVisible" width="50%">
      <el-form label-width="100px" ref="dialogForm" :rules="rules" :model="dialogForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="井名" prop="wellName">
              <el-input v-model="dialogForm.wellName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业公司" prop="cementCompany">
              <el-select
                placeholder="请选择作业公司"
                style="width:100%;"
                v-model="dialogForm.cementCompany"
              >
                <el-option
                  v-for="item in workCompanyOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="国别" prop="country">
              <el-select placeholder="请选择国别" style="width:100%;" v-model="dialogForm.country">
                <el-option v-for="item in countryOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="区域" prop="area">
              <el-select placeholder="请选择活动区域" style="width:100%;" v-model="dialogForm.area">
                <el-option v-for="item in areaOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="区块" prop="block">
              <el-input v-model="dialogForm.block"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="构造/油田" prop="oilField">
              <el-input v-model="dialogForm.oilField"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="井型" prop="wellType">
              <el-select placeholder="请选择井型" style="width:100%;" v-model="dialogForm.wellType">
                <el-option v-for="item in wellTypeOptions" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="井别" prop="wellSpacing">
              <el-select placeholder="请选择井别" style="width:100%;" v-model="dialogForm.wellSpacing">
                <el-option
                  v-for="item in wellSpacingOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createWellVisible = false">取 消</el-button>
        <el-button type="primary" @click="createSucceedWell('dialogForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>此操作将永久删除该条记录, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelet">确 定</el-button>
      </span>
    </el-dialog>-->
  </div>
</template>
<script>
import { COOKIE_LIST } from '@/util/constant'
import Cookie from 'js-cookie'
import { Upload ,Drawer} from 'element-ui'
import {
  GetCountryData,
  GetworkbaseData,
  GetWorkCompany,
  GetArea,
  CreateWell,
  DeleteWell,
  GetWellType,
  GetWellSpacing
} from '@/api/module/well_management'

export default {
  components: {
    elUpload: Upload,
    elDrawer: Drawer
  },
  data() {
    return {
      fileList: [],
      form: {
        wellName: '',
        country: '',
        oilfield: '',
        block: '',
        workCompany: '',
        wellType: '',
        wellSpacing: '',
        drillDate: '',
        actualWellDepth: '',
        holeTemperature: '',
        holePressure: '',
        holeMaxDensity: '',
        area: ''
      },
      rules: {
        wellName: [{ required: true, message: '请输入井名', trigger: 'blur' }],
        country: [{ required: true, message: '请选择国家', trigger: 'change' }],
        cementCompany: [
          { required: true, message: '请选择作业公司', trigger: 'change' }
        ],
        area: [{ required: true, message: '请选择区域', trigger: 'change' }],
        block: [{ required: true, message: '请选择区块', trigger: 'blur' }],
        oilField: [{ required: true, message: '请选择油田', trigger: 'blur' }],
        wellType: [
          { required: true, message: '请选择井型', trigger: 'change' }
        ],
        wellSpacing: [
          { required: true, message: '请选择井别', trigger: 'change' }
        ]
      },
      dialogForm: {
        wellName: '',
        country: '',
        oilField: '',
        block: '',
        cementCompany: '',
        area: '',
        wellType: '',
        wellSpacing: ''
      },
      labelPosition: 'right',
      createWellVisible: false,
      formLabelWidth: '120px',
      workCompany: '',
      wellName: '',
      country: '',
      area: '',
      pager: {
        pageNum: 1,
        pageSize: 10
      },
      date1: '',
      date2: '',
      totalElements: 0,
      total: 0,
      tableData: [
        // {
        //   WELLNAME: "Hsn1"
        // }
      ],
      wellSpacingOptions: [],
      wellTypeOptions: [],
      workCompanyOptions: [],
      countryOptions: [],
      areaOptions: [],
      actualWellDepthOptions: [
        '2000',
        '2500',
        '3000',
        '3500',
        '4000'
        // { label: '2000m', value: '2000' },
        // { label: '2500m', value: '2500' },
        // { label: '3000m', value: '3000' },
        // { label: '3500m', value: '3500' },
        // { label: '4000m', value: '4000' }
      ],
      holeTemperatureOptions: [
        '50',
        '100',
        '150',
        '200',
        '250'
        // { label: '50℃', value: '50' },
        // { label: '100℃', value: '100' },
        // { label: '150℃', value: '150' },
        // { label: '200℃', value: '200' },
        // { label: '250℃', value: '250' }
      ],
      holePressureOptions: ['1000', '3000', '5000', '7000', '9000', '10000'],
      holeMaxDensityOptions: ['1.9', '2.0', '2.1', '2.2', '2.3', '2.4'],
      selectLabelData: [
        { id: 2, label: '国别', value: 'country' },
        { id: 3, label: '区域', value: 'area' },
        { id: 4, label: '区块', value: 'block' },
        { id: 5, label: '油田', value: 'oilfield' },
        { id: 6, label: '井型', value: 'wellType' },
        { id: 7, label: '井别', value: 'wellSpacing' },
        { id: 8, label: '完钻井深(m) ＞', value: 'actualWellDepth' },
        { id: 9, label: '井底温度(℃) ＞', value: 'holeTemperature' },
        { id: 10, label: '井底压力(psi) ＞', value: 'holePressure' },
        { id: 11, label: '最大密度(g/cm3) ＞', value: 'holeMaxDensity' }
      ],
      drawer: false,
      selectLabelCount: 0,
      selectLabelForm: {
        selectLabels: []
      },
      selectLabelParams: {},
            // 文件上传设定token
            header: {
        Authorization: Cookie.get(COOKIE_LIST.AUTHORIZATION)
      }
    }
  },
  created() {
    this.getWorkCompany()
    this.getCountry()
    this.getArea()
    this.getWellType()
    this.getWellSpacing()
    // this.createSucceedWell();
  },
  methods: {
    //上传超过个数
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    //手动上传
    submitUpload() {
      this.$refs.upload.submit()
    },
        //抽屉提示
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    handData(file, fileList) {
      console.log(fileList)
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleDeleteWell(item) {
      console.log('item', item)
      console.log(this.$confirm)
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          DeleteWell(item.WELLNAME).then(
            () => {
              this.submitform()
              this.$message.success('删除成功')
            },
            err => {
              this.$message.error(err.message)
            }
          )
        })
        .catch(() => {})
      //   this.DeleteWell = wellName;
      //   this.dialogVisible = true;
      //   this.loaddata()
    },
    //创建井眼成功
    createSucceedWell(formName) {
      console.log('------', this.$refs)
      this.$refs[formName].validate(valid => {
        console.log('for', valid)
        if (valid) {
          CreateWell(this.dialogForm)
            .then(res => {
              console.log('createSucceedWell', res)
              this.createWellVisible = false //返回上一url
              this.$refs[formName].resetFields()
              this.submitform()
            })
            .catch(err => {
              console.log('err', err.response)
              this.$message.error(err.message)
            })
        } else {
          this.$notify.warning({
            title: '温馨提示',
            message: '请检查必填项'
          })
          return false
        }
      })
    },
    handleClosewell(done) {},
    submitform() {
      this.pager.pageNum = 1
      this.loaddata(this.pager.pageNum, this.pager.pageSize, this.form)
    },
    loaddata(pageNum, pageSize, form) {
      GetworkbaseData(pageNum, pageSize, form)
        .then(res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          // this.pager.pageNum = res.data.data.page
          this.loading = false
        })
        .catch(err => {
          this.$message.error(err.message)
          this.loading = false
        })
    },
    handlePageChange(page) {
      this.pager.pageNum = page
      this.loaddata(page, this.pager.pageSize, this.form)
    },
    loadFilterParams() {
      // 从query读取过滤条件
      // this.filterQuery = {...filterQuery, ...this.$route.query}
      // 从query中取到的参数是string的,要转成element要求的number
      this.form = {
        ...this.form,
        pageIdx: parseInt(this.form.pageIdx, 10),
        pageSize: parseInt(this.form.pageSize, 10)
      }
      console.log(this.form)
    },
    getWorkCompany() {
      let params = {
        label: '作业公司'
      }
      GetWorkCompany(params)
        .then(res => {
          console.log('e',res)
          this.workCompanyOptions = res.data.data
        })
        .catch(e => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    getArea() {
      GetArea()
        .then(res => {
          this.areaOptions = res.data.data
          console.log('res', this.areaOptions)
        })
        .catch(e => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    // 获取井型
    getWellType() {
      GetWellType()
        .then(res => {
          this.wellTypeOptions = res.data.data
          console.log('res', this.areaOptions)
        })
        .catch(e => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    // 获取井别
    getWellSpacing() {
      GetWellSpacing()
        .then(res => {
          this.wellSpacingOptions = res.data.data
          console.log('res', this.areaOptions)
        })
        .catch(e => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    // 获取国家信息
    getCountry() {
      let params = {
        label: '国别'
      }
      GetCountryData(params)
        .then(res => {
          this.countryOptions = res.data.data
        })
        .catch(e => {
          this.$message.error('未查询到国别数据！')
        })
    }
  }
}
</script>

<style scoped>
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.createWell {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  padding-right: 20px;
}
.el-form-item{
  margin: 5px ;
  /* margin: 5px !important; */
}
</style>
